<template>
	<div class="main">
		<div class="bg"></div>
		<div class="data">
			<div class="data-top">
				<div class="code">
					<div>
						<img :src="studentData.avatar==0?'@/assets/images/wechat/student/legalright/avatar.png':studentData.avatar"/>
					</div>
					<div>
						<div class="name">{{studentData.name}}</div>
						<div class="date">{{studentData.expireTime}}到期</div>
					</div>
					<div>
						<img src="@/assets/images/wechat/student/legalright/code.png"/>
					</div>
				</div>
				<div class="bar-day">
					<div class="bar">
						<div :style="'width:'+progress+'%'" class="bar-F"></div>
					</div>
					<div class="remain">剩余{{studentData.remainingTime}}天</div>
				</div>
				<div class="vip">学生会员</div>
			</div>
			<div class="data-bottom">
				<div class="legal-right">
					<div class="right">当前权益</div>
					<div class="type">
						<router-link :to="{ path: '' }">
							<div class="right-img">
								<img src="@/assets/images/wechat/student/legalright/fa.png"/>
							</div>
							<div class="right-word">法律纠纷</div>
						</router-link>
						<router-link :to="{ path: '' }">
							<div class="right-img">
								<img src="@/assets/images/wechat/student/legalright/jiu.png"/>
							</div>
							<div class="right-word">纠纷调解</div>
						</router-link>
						<router-link :to="{ path: '' }">
							<div class="right-img">
								<img src="@/assets/images/wechat/student/legalright/zixun.png"/>
							</div>
							<div class="right-word">心理咨询</div>
						</router-link>
					</div>
				</div>
				<div class="legal-right">
					<div class="right">当前权益</div>
					<div class="type">
						<router-link :to="{ path: '' }">
							<div class="right-img">
								<img src="@/assets/images/wechat/student/legalright/fazi.png"/>
							</div>
							<div class="right-word">法律咨询</div>
							<div class="status">(已拥有)</div>
						</router-link>
						<router-link :to="{ path: '' }">
							<div class="right-img">
								<img src="@/assets/images/wechat/student/legalright/jiu.png"/>
							</div>
							<div class="right-word">纠纷调解</div>
							<div class="status">(已拥有)</div>
						</router-link>
						<router-link :to="{ path: '' }">
							<div class="right-img">
								<img src="@/assets/images/wechat/student/legalright/zixun.png"/>
							</div>
							<div class="right-word">心理咨询</div>
							<div class="status">(已拥有)</div>
						</router-link>
						<router-link :to="{ path: '' }">
							<div class="right-img">
								<img src="@/assets/images/wechat/student/legalright/het.png"/>
							</div>
							<div class="right-word">合同审查</div>
							<div class="status">(待解锁)</div>
						</router-link>
						<router-link :to="{ path: '' }">
							<div class="right-img">
								<img src="@/assets/images/wechat/student/legalright/service.png"/>
							</div>
							<div class="right-word">企业服务</div>
							<div class="status">(待解锁)</div>
						</router-link>
						<router-link :to="{ path: '' }">
							<div class="right-img">
								<img src="@/assets/images/wechat/student/legalright/jin.png"/>
							</div>
							<div class="right-word">风险预警</div>
							<div class="status">(待解锁)</div>
						</router-link>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import { studentFindStudentById } from '@/api/student'
	import { formatDate } from '@/filters/formatdate'
	
	export default {
		components: {
			
		},
		data() {
			return {
				baseUrl:process.env.VUE_APP_BASE_API,
				studentData:{
					name:"",
					avatar:"",
					expireTime:0,
					remainingTime:"",
					startTime:0
				},
				progress:100
			}
		},
		created:async function() {
			var ajaxData = {}
			var resultData = await studentFindStudentById(ajaxData)
			if(resultData.code==200){
				this.studentData.avatar=resultData.data.avatar
				this.studentData.name=resultData.data.name
				this.studentData.expireTime=resultData.data.expireTime
				this.studentData.startTime=resultData.data.acctno.substring(0,4)
				//通过截取学号前4位年份+9月1日0时0分0秒转换起始时间戳
				var date =  new Date(this.studentData.startTime,8,1,0,0,0)
				this.studentData.startTime = date.getTime()/1000
				//当前浏览器时间
				var nowTime = Date.parse(new Date())/1000
				//计算剩余天数
				this.studentData.remainingTime=this.studentData.expireTime - nowTime
				this.studentData.remainingTime=parseInt(this.studentData.remainingTime/86400)
				//进度百分比计算
				this.progress=parseInt((nowTime-this.studentData.startTime)/(this.studentData.expireTime-this.studentData.startTime)*100)
				//格式化过期时间
				this.studentData.expireTime=formatDate(this.studentData.expireTime)
			}
		},
		beforeMount: function() {
			
		},
		mounted: function() {
			
		},
		methods: {
			
		}
	}
</script>
<style lang="scss" scoped>
	.main{
		width: 100%;
		height: 100vh;
		overflow: auto;
		position: relative;
		.bg{
			position:absolute;
			top:0;
			left:0;
			background: #000000;
			width:100%;
			height:110px;
			border-bottom-left-radius: 18px;
			border-bottom-right-radius: 18px;
		}
		.data{
			position:absolute;
			left:2%;
			top:28px;
			width:96%;
			margin-bottom: 50px;
			.data-top{
				background:#EFC478;
				//height:149px;
				padding-left:16px;
				padding-right:12px;
				overflow: hidden;
				.code{
					display:flex;
					margin-top:25px;
					>div:nth-child(1){
						width:58px;
						height:58px;
						border-radius: 29px;
						overflow: hidden;
						>img{
							width:100%;
						}
					}
					>div:nth-child(2){
						flex:1;
						margin-left:18px;
						margin-top:8px;
						color: #FBFBFB;
						.name{
							font-size: 16px;
							font-weight: 400;
						}
						.date{
							margin-top:8px;
							font-size: 8px;
							font-weight: 400;
						}
					}
					>div:nth-child(3){
						width: 39px;
						height:39px;
						overflow: hidden;
						>img{
							width:100%;
						}
					}
				}
				.bar-day{
					display: flex;
					margin-top:21px;
					overflow: hidden;
					.bar{
						flex:1;
						margin-top:5px;
						margin-right:10px;
						height:8px;
						background: #AB8B52;
						border-radius: 4px;
						position: relative;
						.bar-F{
							position: absolute;
							left:0;
							top:0;
							background: #FFFFFF;
							height:8px;
							border-radius: 4px;
						}
					}
					.remain{
						font-size: 10px;
						font-weight: 400;
						color: #FBFBFB;
						line-height: 18px;
					}
				}
				.vip{
					text-align: right;
					font-size: 12px;
					margin-top:15px;
					font-weight: 400;
					color: #FBFBFB;
					margin-bottom: 8px;
				}
			}
			.data-bottom{
				padding-left:16px;
				padding-right:12px;
				.legal-right{
					margin-top:31px;
					.right{
						font-size: 14px;
						font-weight: 400;
						color: #000000;
					}
					.type{
						display:flex;
						justify-content: space-around;
						flex-wrap:wrap;
						>a{
							width: 33%;
							margin-top:36px;
							.right-img{
								margin:auto;
								width:43px;
								height:43px;
								overflow: hidden;
								>img{
									width:100%;
								}
							}
							.right-word{
								margin-top:10px;
								font-size: 12px;
								font-weight: 300;
								color: #000000;
								text-align: center;
							}
							.status{
								text-align: center;
								font-size: 8px;
								font-weight: 400;
								color: #000000;
								margin-top: 8px;
							}
						}
					}
				}
			}
		}
	}
</style>